FIXME tag

Modification du thème de la documentation Ubuntu-fr

Cette page fait partie du Chantier de refonte du design relancé en 2017 et sert de guide aux administrateurs qui ont pris le parti de repartir de zéro. Une fois en place tous les éléments notés ici feront parti intégrante de l'installation en locale et la page servira ensuite uniquement d'aide-mémoire pour eux.

Il s'agit ici de compléter l'installation de la documentation en locale par la mise en place de son thème et sa personnalisation.

Pour facilité la lecture, les chemins des fichiers indiqués partent du dossier où vous avez installé votre documentation. Il s'agira donc ici de /var/www/html/ubuntu-fr/ubuntu-fr-doc/

Installation du thème

Celà correspondra, après l'avoir téléchargée, à l'extraire avec le nom boostrap3 dans le dossier lib/tpl et à ajouter dans le fichier conf/local.protected.php la ligne suivante
$conf['template']    = 'bootstrap3';
Celà correspondra à modifier dans le fichier local.protected.php les lignes comme suit
$conf['tpl']['bootstrap3']['bootstrapTheme'] = 'bootswatch';
$conf['tpl']['bootstrap3']['bootswatchTheme'] = 'united';

Après enregistrement de ces modifications, actualiser le navigateur: vous devriez être sur le thème United :)

Personnalisation des feuilles de style

Il est tout à fait possible de partir d'un thème existant pour l'adapter à vos envies.

Récupérer un thème

D'autres navigateurs le font mais Firefox avec ses outils de développement web déjà présent par défaut, permet de récupérer la feuille de style pour l'adapter à vos envies et créer ainsi votre propre thème.

Une fois le thème United en place :

  1. ouvrez l'éditeur de style depuis le menu développement web de Firefox accessible directement avec le raccourci clavier Maj + F7.
  2. enregistrez le fichier bootstrap.min.css où vous le souhaitez.
    • Pour la suite il sera placé dans un dossier dédié de notre documentation local : lib/tpl/bootstrap3/assets/bootstrap/themeperso1/
  3. modifiez le fichier bootstrap.min.css à votre convenance.
C'est le nom de votre dossier qui défini celui de votre thème. Ne renommez en aucun cas le fichier bootstrap.min.css sans quoi il ne sera pas reconnu.

Activation d'un thème personnel

Pour activer votre thème il faudra :

Ensuite depuis les paramètres de configuration :

Celà correspondra à ajouter dans conf/local.protected.php la ligne
$conf['tpl']['bootstrap3']['showThemeSwitcher'] = 1;
Celà correspondra à modifier dans lib/tpl/boostrap3/conf/default.php la ligne suivante:
$conf['useLocalBootswatch']          = 1;

Actualiser la page du navigateur. Vous devriez avoir une icône supplémentaire vous permettant de choisir votre thème.

Barre de navigation

Installer le Plugin Bootswrapper

Celà correspondra à ajouter dans conf/local.protected.php la ligne suivante :
$conf['loadBootstrap'] = 1;
Cette extension nécessite le module SimpleXML pour php. Vérifier que vous l'avez bien
php -m | grep -i simplexml

devrait vous répondre

SimpleXML

Sinon installez-le

Activer le module navbar en modifiant dans lib/tpl/bootstrap3/conf/default.php la ligne suivante

$conf['useLegacyNavbar']             = 1;
<nav type="tabs">
  * [[:start]]
  * [[:wiki:plugin:bootswrapper:nav|Nav Plugin]]
  * [[playground:playground]]
  * DokuWiki
    * [[:wiki:welcome]]
    * [[:wiki:syntax]]
</nav>

Logo et favicon

Pour mettre en place le logo et le favicon FIXME

DIVERS

FIXME voir si c'est utile ou pas de noter ça:

Option sur bootswatch

Autres liens

Chantier du design chez aldian